<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css.css">
        <script src="jquery-3.2.1.min.js" charset="utf-8"></script>
        <script src="webuploader.js" charset="utf-8"></script>
        <script src="Sortable.min.js" charset="utf-8"></script>
    </head>
    <body>
        <div class="mw-line clearfix mb20">
			<div class="mw-title">添加图片：</div>
			<div class="mw-right upload-content clearfix">
				<!-- <div class="upload-item qd-uploading">
					<span class="removeFile"></span>
					<div class="status-cover status-uploading">正在上传<br><span>0</span>%</div>
					<div class="status-cover status status-failed"><span>上传失败</span>重新上传</div>
				</div>
				<div class="upload-item qd-failed">
					<span class="removeFile"></span>
					<div class="status-cover status-uploading">正在上传<br><span>0</span>%</div>
					<div class="status-cover status status-failed"><span>上传失败</span>重新上传</div>
				</div> -->
				<div id="upload-img">

				</div>
				<div class="add-img" id="add-img">
					添加图片
				</div>
			</div>
		</div>
        <script type="text/javascript">
        function getViewTemplate(id){
            var html = "";
                html += "<div class='upload-item qd-uploading' id="+id+">"
                html += "<span class='removeFile'></span>"
                html += "<img src=''>"
                html += "<div class='status-cover status-uploading'>正在上传<br><span>0</span>%</div>"
                html += "<div class='status-cover status status-failed'><span>上传失败</span>重新上传</div>"
                html += "</div>	";
            return html;
		}
        var $addBtn = $("#add-img");
        var article_id = this.articleId;
        //创建文件上传
        var uploader = WebUploader.create({
            auto:true,
            // swf文件路径
            // swf: '../../node_modules/webuploader/dist/Uploader.swf',

            // 文件接收服务端。
            server: '/qdapi/doUpLoad',

            //文件类型
            accept:{
                extensions:"png,jpg,jpeg",
                mimeTypes:"image/jpg,image/jpeg,image/png"
            },
            formData:{
                article_id:article_id
            },
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#add-img',

            // 图片在上传前不进行压缩
            compress: false,
            //并发数
            threads: 1,
            //验证单个文件大小是否超出限制, 超出则不允许加入队列
            fileSingleSizeLimit:10*1024*1024,
            //文件个数
            fileNumLimit:99
        });

        //选择路径监听
        uploader.on( 'fileQueued',  file => {

            var html = this.getViewTemplate(file.id);
            var $item = $(html);
            $("#upload-img").append($item);
            var $img = $item.find("img");
            var $li = $( '#'+file.id );
            //获取文件大小
            var size = file.size;
            //判断文件大小
            if( size < 10*1024*1024 ){
                uploader.makeThumb(file,function(err,src){
                    $img[0].setAttribute("src",src);

                    //添加删除按钮事件

                    $li.find(".removeFile").click(function(event) {
                        uploader.cancelFile( file );
                        $(this).parents(".upload-item").remove();
                    });
                })
            }else{

                this.$message({
                    type:"error",
                    message:"图片大小超过10MB"
                })
                uploader.cancelFile( file );
                $li.find(".status-uploading").hide();
                $li.find(".status-fail").show();
            }


        });

        //上传进度
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.status-uploading span');
            $percent.text(parseInt(percentage*100));
        });

        //上传成功
        uploader.on( 'uploadSuccess', function( file , response ) {
            var $fildEle = $( '#'+file.id );
            var imgId = response.data.articleExtId;
            $fildEle.attr("imgId",imgId);
            // var imgUrl = response.data.url;
            // $fildEle[0].imgUrl = imgUrl;
            $fildEle.removeClass("qd-uploading").addClass("uploaded");
        });

        //缩略图排序
        var uploadContent = $("#upload-img");
        var sortable = new Sortable(uploadContent[0],{
            draggable:".uploaded",
            animation:200
        });
        </script>
    </body>
</html>
